<template>
    <div class=" w-[984px] h-[984px] absolute top-[27px] right-[485px]" >

    <div class="w-full h-full flex flex-col items-center around relative centerBox">
        <!-- around -->
        <!-- 完成 -->
        <div class="absolute left-[320px] top-[203px] w-[50px] h-[50px]  flex justify-center align-bottom items-end  aroundr">年完成</div>
        <!-- aroundr -->
        <div class="absolute left-[173px] top-[381px] flex justify-center align-bottom items-end w-[50px] h-[50px]  aroundr">月完成</div>
        <div class="absolute left-[165px] top-[573px]  w-[50px] h-[50px]  flex justify-center align-bottom items-end  aroundr">同比</div>
        <div  class="absolute left-[483px] top-[792px] w-[50px] h-[50px]  flex justify-center align-bottom items-end  aroundr">超期</div>
        <div  class="absolute left-[757px] top-[613px] w-[50px] h-[50px]  flex justify-center align-bottom items-end  aroundr">日完成</div>
        <div class="absolute left-[770px] top-[412px] w-[50px] h-[50px]  flex justify-center align-bottom items-end   aroundr">完成率</div>
        <div  class="absolute left-[663px] top-[236px] w-[50px] h-[50px]  flex justify-center align-bottom items-end   aroundr">周完成</div>




        <div class="bg-3 w-[97px] h-[97px] absolute left-[380px] top-[244px] text-white text-[28px] flex justify-center items-center font-medium aroundr">
            <CountTo :value="66"></CountTo>%
        </div>
        <div class="bg-3 w-[97px] h-[97px] absolute left-[565px] top-[272px] text-white text-[28px] flex justify-center items-center font-medium aroundr"> <CountTo :value="66"></CountTo>%</div>
        <div class="bg-3 w-[97px] h-[97px] absolute left-[654px] top-[401px] text-white text-[28px] flex justify-center items-center font-medium aroundr"> <CountTo :value="66"></CountTo>%</div>
        <div class="bg-3 w-[97px] h-[97px] absolute left-[613px] top-[577px] text-white text-[28px] flex justify-center items-center font-medium aroundr"> <CountTo :value="66"></CountTo>%</div>
        <div class="bg-3 w-[97px] h-[97px] absolute left-[461px] top-[661px] text-white text-[28px] flex justify-center items-center font-medium aroundr"> <CountTo :value="66"></CountTo>%</div>
        <div class="bg-3 w-[97px] h-[97px] absolute left-[253px] top-[557px] text-white text-[28px] flex justify-center items-center font-medium aroundr"> <CountTo :value="66"></CountTo>%</div>
        <div class="bg-3 w-[97px] h-[97px] absolute left-[242px] top-[365px] text-white text-[28px] flex justify-center items-center font-medium aroundr"> <CountTo :value="66"></CountTo>%</div>





    </div>


    <div class="w-[304px] h-[272px] bg-4 absolute top-[50%] left-[50%] flex flex-col justify-center items-center" style="transform: translate(-50%, -50%);">
        <div style="color: #F9B911;" class="text-[34px] font-normal mt-[-5px]">
            <CountTo :value="78989"></CountTo></div>
        <div class="mt-[-13px]">完成总额</div>
    </div>





    <div class=" absolute bottom-0 left-0 right-0 h-[92px] flex justify-center">
        <div class="relative cursor-pointer ">
            <img class="w-[80px] h-[92px]" src="../assets/10.png" alt="">
            <div  class="absolute cursor-pointer left-0  top-[10px] bottom-0 right-0 flex justify-center items-center" >后台管理</div>
        </div>
        <div class="mx-[60px] relative cursor-pointer">
            <img class="w-[80px] h-[92px]" src="../assets/5.png" alt="">
            <div class="absolute left-0 top-[10px] bottom-0 right-0 flex justify-center items-center">后台管理</div>
        </div>
        <div class="relative cursor-pointer">
            <img class="w-[80px] h-[92px]" src="../assets/5.png" alt="">
            <div class="absolute left-0 top-[10px] bottom-0 right-0 flex justify-center items-center">后台管理</div>
        </div>
    </div>

</div>

  </template>
  
  <script>

  export default {
    name: 'centerBox',

    data() {
        return {
            config: {
                number: [78989],
                content: '{nt}',
                style:{

                }
                }
        }
    },  
    methods:{
 
    }
  }
  </script>
  
  <style scoped>
  .centerBox{
      background-image: url(../assets/2.png);
      background-size: 100% 100%;
  }
.bg-3{
    background-image: url(../assets/3.png);
      background-size: 100% 100%;
}
.bg-4{
    background-image: url(../assets/4.png);
      background-size: 100% 100%;
}
.around{

  animation:rotate 50s linear 0.5s infinite;

}

@keyframes rotate{
      0%{
				transform:rotate(0deg)
				}
      100%{
			  transform:rotate(360deg)
			  }
			}

            .aroundr{

animation:rotateresver 50s linear 0.5s infinite;

}

@keyframes rotateresver{
    0%{
              transform:rotate(0deg)
              }
    100%{
            transform:rotate(-360deg)
            }
          }
  </style>
  